<template>
  <div class="chart-box">
    <div class="chart-item">
      <div class="item-box-left">
        <hospital-in-people-num-analyse-charts></hospital-in-people-num-analyse-charts>
      </div>
      <div class="item-box-right">
      </div>
    </div>
    <div class="chart-item">
      <div class="item-box-left">
        <year-in-hos-people-times-peo-num-analyse-charts></year-in-hos-people-times-peo-num-analyse-charts>
      </div>
      <div class="item-box-right">
        <year-average-in-hos-day-analyse-charts></year-average-in-hos-day-analyse-charts>
      </div>
    </div>
    <div class="chart-item">
      <div class="item-box-left">
        <medical-type-analyse-charts></medical-type-analyse-charts>
      </div>
      <div class="item-box-right">
        <cost-type-analyse-charts></cost-type-analyse-charts>
      </div>
    </div>
    <div class="chart-item">
      <div class="item-box-left">
        <ten-disease-cost-charts></ten-disease-cost-charts>
      </div>
      <div class="item-box-right">
        <hundred-medical-cost-custom-charts></hundred-medical-cost-custom-charts>
      </div>
    </div>
  </div>
</template>

<script>
  import TopFilter from '../last/filter/top-filter1.vue'
  import YearAverageInHosDayAnalyseCharts from '../last/chart/year-average-in-hos-day-analyse-charts.vue'
  import CostTypeAnalyseCharts from  '../last/chart/cost-type-analyse-charts.vue'
  import MedicalTypeAnalyseCharts from '../last/chart/medical-type-analyse-charts.vue'
  import YearInHosPeopleTimesPeoNumAnalyseCharts from '../last/chart/year-in-hos-people-times-people-num-analyse.vue'
  import TenDiseaseCostCharts from '../last/chart/ten-type-single-disease-cost-charts.vue'
  import HundredMedicalCostCustomCharts from '../last/chart/hundred-medical-cost-custom-charts.vue'
  import HospitalInPeopleNumAnalyseCharts from '../last/chart/hospital-in-people-num-analyse.vue'
  export default {
    name: 'index',
    props: ['isChange'],
    data () {
      return {
        itemStyle: {
          height: '300px'
        }
      }
    },
    components: {
      TopFilter,
      YearAverageInHosDayAnalyseCharts,
      YearInHosPeopleTimesPeoNumAnalyseCharts,
      CostTypeAnalyseCharts,
      MedicalTypeAnalyseCharts,
      TenDiseaseCostCharts,
      HundredMedicalCostCustomCharts,
      HospitalInPeopleNumAnalyseCharts
    },
    mounted(){
      this.getChartItem();
    },
    watch: {
      isChange(){
        this.myChart.resize();
        this.getChartItem();
      }
    },
    methods: {
      getChartItem(){
        let height = document.documentElement.clientHeight;
        let barHeight = 60;
        if (document.querySelector('.el-header')) {
          let barHeight = document.querySelector('.el-header').clientHeight;
        } else {
          barHeight = 0;
        }
        document.querySelector('.chart-item').style.height = height - barHeight + 'px';
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../assets/css/first-chart.css";

</style>
